<template>
  <div class="detail-container">
    <van-nav-bar
      title="专题详情"
      left-arrow
      placeholder
      fixed
      @click-left="$router.back()"
    />
    <p v-html="detail.content" class="content"></p>
    <!-- 精选留言 S-->
    <div>
      <div class="comment">
      <span>精选留言</span>
      <van-icon @click="$router.push(`/add/comment/${id}`)" name="chat-o" />
      </div>
      <comment v-for="item in comment" :key="item.id" :commentItem="item"/>
      <div class="see-more">
        <router-link :to="`/message/${id}`" v-if="comment.length">查看更多</router-link>
      </div>
    </div>
    <!-- 精选留言 E-->
    <!-- 专题推荐 S-->
    <div class="recommend">
      <h4>专题推荐</h4>
       <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <!-- <list-item/> -->
          <list-item v-for="item in list" :key="item.id" :subjectItem="item"/>
        </van-list>
    </div>
    <!-- 专题推荐 E-->
  </div>
</template>

<script>
import { getSpecialDetailtData, getSpecialListData, getSelectedCommentListData } from '@/api/Subject'
import comment from './components/comment.vue'
import ListItem from './components/list-item.vue'
export default {
  components: { comment, ListItem },
  name: 'SubjectDetail',
  data() {
    return {
      id: this.$route.params.id,
      detail: {},
      list: [],
      comment: [],
      loading: false,
      finished: false,
      query: {
        page: 1, // 页码
        size: 10 //  每页数量
      }
    }
  },
  created () {
    this.initData()
  },
  methods: {
    async initData() {
      try {
        const { data } = await getSpecialDetailtData({id: this.id})
        this.detail = data.data
        const res = await getSelectedCommentListData({
          ...this.query,
          valueId: this.id,
          typeId: 1,
          showType: 0,})
        this.comment = res.data.data.data
      } catch (error) {
        console.log(error);
      }
    },
    async onLoad() {
      try {
         // 发送请求
        const res = await getSpecialListData(this.query)
        // 将数据push到list数组中
        this.list.push(...res.data.data.data)
        // 关闭loading
        this.loading = false
        // 判断是否结束
        if(res.data.data.data.length < this.query.size) {
          // 结束将finished设为true
          this.finished = true
        } else {
          // 没有结束重设置页码
          this.query.page++
        }
      } catch (error) {
        logerror
      }
    }
  },

}
</script>

<style lang="less" scoped>
.see-more {
  font-size: .37333rem;
  color: #666;
  text-align: center;
  margin-top: 30px;
  /deep/ a:hover,a:visited,a:link {
     color: #666;
  }
}
  /deep/ .van-nav-bar__content {
  background: rgb(225, 28, 52);

  }
  /deep/ .van-nav-bar__title {
    color: #fff;
  }
  /deep/ .van-icon {
    color: #fff;
  }
  .content {
    margin-top: 0;
    margin-bottom: 0s;
    display: flex;
    flex-direction: column;
  }
  .comment {
    display: flex;
    justify-content: space-between;
    padding: 0.38667rem 0.42667rem;
    .van-icon {
      color: #000;
      font-size: 30px;
    }
    span {
      font-size: 30px;
    }
  }

  .recommend {
    h4 {
      height: 140px;
      line-height: 140px;
      text-align: center;
      font-size: .45333rem;
      font-weight: 400;
      background: rgb(245, 247, 249);
    }
  }
</style>